<template>
  <!--分页组件-->
  <div class="pagination" v-if="pageConfig.total > 0">
    <!--上一页-->
    <button
      @click="changCurrentPage(currentPage - 1)"
      :disabled="currentPage === 1"
    >
      上一页
    </button>
    <!-- 第一页 -->
    <button v-if="startEnd.start > 1" @click="changCurrentPage(1)">1</button>
    <!-- 第一个省略号 -->
    <button disabled v-if="startEnd.start > 2">...</button>

    <!-- 连续页码 -->
    <i v-for="(or, index) in startEnd.end" :key="or">
      <button
        v-if="or >= startEnd.start"
        :class="{ active: currentPage === or }"
        @click="changCurrentPage(or)"
      >
        {{ or }}
      </button>
    </i>
    <!-- 第2个省略号 -->

    <button disabled v-if="startEnd.end < totalPage - 1">...</button>
    <!-- 总页数 -->
    <button
      v-if="startEnd.end < totalPage"
      @click="changCurrentPage(totalPage)"
    >
      {{ totalPage }}
    </button>
    <!-- 下一页 -->
    <button
      @click="changCurrentPage(currentPage + 1)"
      :disabled="currentPage === totalPage"
    >
      下一页
    </button>

    <button disabled style="margin-left: 25px">
      共 {{ pageConfig.total }} 条
    </button>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  // 接收外部传来的数据
  props: {
    pageConfig: {
      // 设置当前组件所需数据的默认值
      default: () => ({
        total: 0, // 总条数
        pageNo: 1, // 默认第一页
        pageSize: 5, // 默认每页几条数据
        showPageNo: 5 //默认连续显示的页码是5个
      })
    }
  },
  data() {
    return {
      //  or:or,
      // 组件设置默认选择的页码数
      currentPage: this.pageConfig.pageNo
    }
  },
  // 监视
  watch: {
    // 可以通过'属性.属性的方式获取到值'
    'pageConfig.pageNo'(num) {
      // 切换时立即更新页面
      this.currentPage = num
    }
  },
  // 计算属性
  computed: {
    // 计算总页数
    totalPage() {
      // 获取 总条数数据 和每页显示多少条数据
      const { total, pageSize } = this.pageConfig

      // 向上取整
      if (total < 0 || pageSize < 0) return
      return Math.ceil(total / pageSize)
    },
    // 计算连续页码的开始页码和结束页码
    startEnd() {
      // 获取总页码数 连续页码数 当前选中的页码数

      const {
        currentPage,
        totalPage,
        pageConfig: { showPageNo } // 双重解构
      } = this

      // 开始页码  当前选中页码     向下取整  连续页码数/2
      let start = currentPage - Math.floor(showPageNo / 2)
      // 判断
      if (start < 1) {
        start = 1
      }

      // 结束    当前选中页码     向下取整  连续页码数/2
      // let end = currentPage + Math.floor(showPageNo / 2)
      let end = start + showPageNo - 1
      // 判断连续页码的结束页码如果大于总得页码数 就将其设置为总页码数
      if (end > totalPage) {
        end = totalPage
        // 重新计算开始页码
        start = end - showPageNo + 1
        // 再次进行判断
        if (start < 1) {
          start = 1
        }
      }
      // console.log(start)
      return { start, end }
    }
  },
  // 定义方法
  methods: {
    changCurrentPage(currentPage) {
      // 更新页码数
      this.currentPage = currentPage
      // 页码数改变更新数据
      this.$emit('changCurrentPage', currentPage)
    }
  },
  // 数据初始化之后
  mounted() {
    console.log(this.pageConfig.pageNo)
  }
}

/**
 * 分页的组件
 * 该分页组件中需要其他开发者传入什么样的数据
 *
 *
 * 该分页组件中需要其他开发者传入什么样的事件
 *
 *
 */
</script>

<style lang="less" scoped>
.pagination {
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;
    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }
    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>
